Mini ch 5 by cylcrow · Pull Request #66 · wdonet/react-certification-2021

cylcrow · 2021-03-26T21:32:57Z

What this PR do?

Performs tasks for mini challenge 5

Any background context you want to provide?

⚠️ ⚠️ ⚠️ ⚠️ ⚠️ Lots of new features, tests and components. 🚀 🧪 : 🔥

How should this be manually tested?

running tests
Or enter here

Screenshots

Test coverage

NOTE: If videos doesn't load it could be due to exceeded YouTube Data API quota.

OMG! 😃

- Removed unnecessary files - Added first tests - Added first components - Added dependencies for testing

…not yet created components

…cription

- First iteration for base components - Modified Header structure: created StyledSection component to a better arrangement of components

- Added card component - Added HomeVideos component - Added tests for new added components - Added/refactored styles for HomeVideo and Card component - Refactored tests for Card component

…ests refactor to comply just with react-testing-library

- Added roles to elements to improve accesibility - Refactored tests to find elements by role instead of their id

- ✨ Added theming prototype - ✅ Added first specs to test integration with theming

- Changed directory name 'Base' to 'ui', indicating that files contained here will be for general UI integration - Updated tests in Card component

- Refactored code - Moved mocked files to a new folder - Mocked API calls - Created tests for custom hooks

- Added test for YT playback frame - Added component for youtube playback

- Added SmallVideoCard component - Added RelatedVideoList component - Added styles for each new component - Added tests for each new component

- Removed unnecesary code from VideoPlayerContainer - Added tests to assert small captions video change - Improved code format

- Added AppContext to share global context - Moved theme spec to AppContext - Moved useSearch to App.jsx component - Added appReducer for global context: AppContext - Deleted unnecessary files

- Added test for useReducer, googleMockedAPIObject files - Prevented props passing from parent componenst to child componenst using context props - Reformated code on some files

… components

- Added tests for loginService - Added tests for login screen - Added test for functionality to redirect to /home on successful login

- Added Page404 component and tests

- Optimized VideoPlayerContainer to avoid re-renders on pushing on same route

- Context value passed to hide/show favorite buttons - Added routes for logged user

jparciga

Mini-Challenge 5 Feedback

Excellent job Andrés 👏🏻👏🏻👏🏻 !!! You applied all the concepts covered during the Bootcamp and even more!! Your code is very well structured and organized, you really followed a TDD approach in your project and you tested almost every single functionality and use-case, I'm really impressed and I'm pretty sure that you already are and continue to be an excellent engineer, congratulations 🙌🏻🎉🍾 !!

Acceptance Criteria

✅ All the sections have their own route.
✅ Navigation across the sections is implemented correctly.
✅ The Global State is persistent across all the sections.
✅ The "Mocked Authentication" mechanism works correctly.
✅ The "session data" is stored in the Global Context correctly.
✅ Videos can be added to the Favorites list.
✅ Videos can be removed from the Favorites list.
✅ Navigation to Favorite Videos View using a private route is implemented correctly (only authenticated users should access this section).
✅ Navigation to the Favorite Video Details View using a private route is implemented correctly (only authenticated users should access this section).
½ Information for the selected favorite video is displayed correctly -> Video details information is missing underneath the player:

✅ The list of other favorite videos in the Favorite Video Details View is displayed.
✅ 🙌🏻. Testing coverage is above 70%. (Please include a screenshot of the code coverage report in your PR description). -> Awesome job implementing almost every test-case possible for your components, reducers, utils, etc.

Just a few tests failed, but don't worry you already achieved the desired coverage for this demo project :)

Bonus Points

✅ The Add/remove from favorites button should appear when the user passes the mouse over the video card in the list.
✅ Integrate with a real authentication provider (such as Auth0, OAuth, or Firebase).
✅ A 404 section is shown when a route is not found.
✅ The Login View is implemented as a modal using React Portals.

jparciga · 2021-03-30T21:52:24Z

src/components/Layout/Header.spec.jsx

+  it('fires user search until presses enter', async () => {
    const EXPECTED_TEXT = 'Hello, ';
    const TRIGGER_TYPING = 'there';
-    const { searchInput, contextValue } = build();
+    const built = await build();
+    const { searchInput, history, contextValue } = built;
    fireEvent.change(searchInput(), { target: { value: TRIGGER_TYPING } });
    fireEvent.change(searchInput(), { target: { value: EXPECTED_TEXT } });
    expect(searchInput().value).toBe(EXPECTED_TEXT);
    expect(contextValue.search).not.toHaveBeenCalled();
    fireEvent.keyPress(searchInput(), { key: 'Enter', code: 13, charCode: 13 });
+    expect(history().location.pathname).toBe("/home");
    expect(contextValue.search).toHaveBeenCalled();
  });


Nice test case 👌🏻

jparciga · 2021-03-30T22:06:08Z

src/ui/Button/Button.spec.jsx

+describe('Button', () => {
+
+    it('Shows specified text', () => {
+        const EXPECTED_TEXT = 'Test text'
+        const { firstChild } = build(<Button>{EXPECTED_TEXT}</Button>).container;
+        expect(firstChild).toHaveTextContent(EXPECTED_TEXT);
+    })
+
+    it('Has passed id', () => {
+        const EXPECTED_ID = 'button-id';
+        const { firstChild } = build(<Button id={EXPECTED_ID}/>).container;
+        expect(firstChild).toHaveProperty('id', EXPECTED_ID);
+    })
+
+    it('renders with light theme', () => {
+        const { firstChild } = build().container;
+        expect(firstChild).toHaveStyle(`background: ${lightTheme.color.secondary}`);
+        expect(firstChild).toHaveStyle(`color: ${lightTheme.color.fontPrimary}`);
+    });
+
+    it('renders with dark theme', () => {
+        const { firstChild } = build(<Button/>, darkTheme).container;
+        expect(firstChild).toHaveStyle(`background: ${darkTheme.color.secondary}`);
+        expect(firstChild).toHaveStyle(`color: ${darkTheme.color.fontPrimary}`);
+    });
+
+    it('triggers onClick', () => {
+        const mockedFunction = jest.fn();
+        const { firstChild } = build(<Button onClick={mockedFunction}/>).container;
+        fireEvent.click(firstChild);
+        expect(mockedFunction).toHaveBeenCalledTimes(1);
+    });
+


Great way to test your component 👍🏻

jparciga · 2021-03-30T23:30:43Z

src/reducers/headerReducer.spec.jsx

+    it('mutates "sidebarOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_SIDEBAR_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(EXPECTED_VALUE);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });
+
+    it('mutates "avatarMenuOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_AVATAR_MENU_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(EXPECTED_VALUE);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });
+
+    it('mutates "loginFormOpen" only', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: SET_LOGIN_FORM_OPEN, payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(EXPECTED_VALUE);
+    });
+
+    it('Does not mutate anyting when action type is not recognized', () => {
+        const EXPECTED_VALUE = true;
+        const passedState = deepCopy(initialState);
+        const stateResult = headerReducer(passedState, { type: '?', payload: EXPECTED_VALUE });
+        expect(stateResult.sidebarOpen).toBe(passedState.sidebarOpen);
+        expect(stateResult.avatarMenuOpen).toBe(passedState.avatarMenuOpen);
+        expect(stateResult.loginFormOpen).toBe(passedState.loginFormOpen);
+    });


jparciga · 2021-03-31T00:11:07Z

src/components/App/App.spec.jsx

+  it('applies "light" theme if none selected', async () => {
+    const wrapper = await build();
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+  });
+
+  it('changes "light" theme to "dark" theme', async () => {
+    const wrapper = await build();
+
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+    await act(async () => {
+      fireEvent.click(wrapper.ThemeSwitch());
+    });
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${darkTheme.color.background}`
+    );
+  });
+
+  it('shows videos list after successful fetch', async () => {
+    const built = (await build());
+    const { videosList } = built;
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows  "No hay videos :/" legend after failed fetch', async () => {
+    global.gapi = googleMockedAPIObject(false);
+    const built = (await build());
+    const { noVideosAvailableCaption } = built;
+    expect( noVideosAvailableCaption() ).toBeTruthy();    
+  });
+
+  it('waits until `gapi` object is defined before first search', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    global.gapi = googleMockedAPIObject();
+    await act( async () => { await for400Miliseconds(); });
+
+    const { videosList } = built; 
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows "Couldn\'t load videos" when "gapi" object is not loaded after 1 second', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    await for400Miliseconds();
+
+    await act( async () => { 
+      await for400Miliseconds();
+      global.gapi = googleMockedAPIObject(); 
+    });
+
+    const { noVideosAvailableCaption } = built; 
+    expect(noVideosAvailableCaption()).toBeTruthy();
+  });


Excellent 👏🏻

cylcrow and others added 30 commits February 19, 2021 16:16

✅ ➕ 🎨 🔥 Fork, cleanup and first tests and component's creation

a8b259f

- Removed unnecessary files - Added first tests - Added first components - Added dependencies for testing

🚧 ✅ 🎨 Added tests to assert components default styling and stubs for …

6466b34

…not yet created components

♻️ Refactored names to comply with the specified in the challenge des…

dca62d2

…cription

♻️ ✅ ✨ 💄 Added base components located in Header component

07be5b1

- First iteration for base components - Modified Header structure: created StyledSection component to a better arrangement of components

✨ ♻️ ✅ 💄 Added Card component

d48c4e1

✨ ♻️ ✅ 💄 Added Card component

88e5f76

- Added card component - Added HomeVideos component - Added tests for new added components - Added/refactored styles for HomeVideo and Card component - Refactored tests for Card component

💄 🎨 Polished styles for Card component

a3c7089

testing-libraries-cleanup: ♻️ Removed unnecesary dependencies after t…

f7b8cf8

…ests refactor to comply just with react-testing-library

🍱 ♿ ♻️ Added roles to each element

e5c9eac

- Added roles to elements to improve accesibility - Refactored tests to find elements by role instead of their id

✅ ♻️ ✨ Added theming prototype

4547dca

- ✨ Added theming prototype - ✅ Added first specs to test integration with theming

🚧 ♻️ Added theme wrapper for testing purposes

436964f

♻️ 🏗️ 🚧 Components isolation

991f0b5

- Changed directory name 'Base' to 'ui', indicating that files contained here will be for general UI integration - Updated tests in Card component

♻️ ✨ ♿ ⚗️ Added VideoCards

be967d3

♻️ ♿ 🚧 Improved accesibility for Card components

7ed4920

✨ 🔥 🚚 ♻️ 🎨 🐛 ✅ Added youtube API

671b550

- Refactored code - Moved mocked files to a new folder - Mocked API calls - Created tests for custom hooks

♻️ 🎨 ✨ 🚚 Adding youtube playback iframe

233f180

- Added test for YT playback frame - Added component for youtube playback

♻️ 🐛 ✨ ✅ Added video player and video change

0fb5003

- Added SmallVideoCard component - Added RelatedVideoList component - Added styles for each new component - Added tests for each new component

✨ 🐛 🚧 Added VideoPlayer feature to return to HomeVideos on search

c1c945a

✅ 🔥 🎨 Added remaining tests for mini ch 3

d3123dc

- Removed unnecesary code from VideoPlayerContainer - Added tests to assert small captions video change - Improved code format

🔥 ♻️ ✅ Removed unnecessary ThemeContext from styled-components

510fd3a

♻️ 🔥 ✅ Added reducer for App, removed unnecessary files

cb565b0

- Added AppContext to share global context - Moved theme spec to AppContext - Moved useSearch to App.jsx component - Added appReducer for global context: AppContext - Deleted unnecessary files

🔥 ✅ Updated properties names

c7c7f5e

- Added test for useReducer, googleMockedAPIObject files - Prevented props passing from parent componenst to child componenst using context props - Reformated code on some files

🐛 ✅ Solved issues loading videos by id on iframe

bbf8b0d

🎨 💄 ✅ Added test for theme behavior for TextField and Header components

56c3147

🎨 💄 ✅ Added test for theme behavior for CardDescription and CardTitle…

bb045c2

… components

🎨 💄 ✅ Added test for theme behavior for SmallVideoCard component

9fb8e46

♻️ ✅ 🎨 Added tests for youtube search service

f3239a6

♻️ Moved generic components to higher path

6a31647

✨ ♻️ 🚧 Added routes for each feature

24ac659

✨ Added login screen

1380c53

- Added tests for loginService - Added tests for login screen - Added test for functionality to redirect to /home on successful login

cylcrow force-pushed the mini-ch-5 branch 2 times, most recently from c94c67e to 77ab3cb Compare March 29, 2021 21:10

Andrés Campos Hernández added 12 commits March 29, 2021 15:13

♻️ ⚡ 🐛 Fixed bug when videoId was updated on VideoPlayerContainer

a529834

- Added Page404 component and tests

🐛 Solved bug loading videos VideoPlayer>Home>VideoPlayer

d35c358

✨ ♻️ ✅ Added Overlay and Menu components

5a2f82a

✨ ♻️ ✅ Added Sidebar and buttons with functionality

2e93c5b

✨ ♻️ ✅ Added favorites Add/Remove feature

7de97f4

- Optimized VideoPlayerContainer to avoid re-renders on pushing on same route

✨ ♻️ ✅ Added tests and features to show UI corresponding to logged user

fb5c606

🐛 Solved issues parsing/saving data from/to localStorage/sessionStorage

b4808e1

♻️ 🔥 Moved feature to generic component

c27bcd8

♻️ 🔥 ✅ Moved VideoPlayerContainer to generic component

49e9010

✨ ♻️ ✅ Added login to a react portal

72a6c2e

✨ ♻️ ✅ Added favorites button to SmallCardCaptions

cd471e9

✨ ♻️ ✅ Added private routes

ffa05de

cylcrow force-pushed the mini-ch-5 branch 4 times, most recently from f94b608 to 5b8c5b2 Compare March 30, 2021 19:43

✨ ♻️ 🚀 Added last features

c8fff2a

- Context value passed to hide/show favorite buttons - Added routes for logged user

cylcrow force-pushed the mini-ch-5 branch from 5b8c5b2 to c8fff2a Compare March 30, 2021 20:25

jparciga reviewed Mar 31, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Mini ch 5#66

Mini ch 5#66
cylcrow wants to merge 43 commits intowdonet:masterfrom
cylcrow:mini-ch-5

cylcrow commented Mar 26, 2021 •

edited

Loading

Uh oh!

jparciga left a comment

Uh oh!

jparciga Mar 30, 2021

Uh oh!

jparciga Mar 30, 2021

Uh oh!

jparciga Mar 30, 2021

Uh oh!

jparciga Mar 31, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

cylcrow commented Mar 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this PR do?

Any background context you want to provide?

How should this be manually tested?

Screenshots

Uh oh!

jparciga left a comment

Choose a reason for hiding this comment

Mini-Challenge 5 Feedback

Acceptance Criteria

Bonus Points

Uh oh!

jparciga Mar 30, 2021

Choose a reason for hiding this comment

Uh oh!

jparciga Mar 30, 2021

Choose a reason for hiding this comment

Uh oh!

jparciga Mar 30, 2021

Choose a reason for hiding this comment

Uh oh!

jparciga Mar 31, 2021

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cylcrow commented Mar 26, 2021 •

edited

Loading